<template>
    <div id="yh">
       <!-- 优惠券单元格 -->
     <!-- <van-coupon-cell title="优惠" value="领劵">
    @click="showList = true"
    :coupons="coupon"
    :editable="false"/>
    <van-popup
    v-model="showList"
    round
    position="bottom"
    style="height: 50%; padding-top: 4px;" -->
<!-- >  -->
  <!-- <van-coupon-list
   disabled-title=" "
  :show-count="false"
  :show-exchange-bar="false"
  close-button-text="完成"
  enabled-title="领优惠卷"
  :coupons="coupon"
  @change="onChange"
  /> -->
 <!-- </van-popup> -->
    <div class="youhui">优惠</div>
    <div class="yhj" v-for="(item,index) in yhlist" :key="index">
        ￥{{item.value | yhjfoo}}元 {{item.name}}
    </div>
        <div class="lingjuan">领劵<van-icon name="arrow" size="22"  @click="yhsbar"/></div>
    </div>
</template>
<script>
import http from '@/util/http'
import { Icon, CouponCell, CouponList, Popup } from 'vant'
import Vue from 'vue'

Vue.use(Icon)

Vue.use(CouponCell).use(CouponList).use(Popup)
export default {
  data () {
    return {
      yhlist: []
      // showList:false,
      // coupon:[]

    }
  },
  filters: {
    yhjfoo (path) {
      return path / 100
    }
  },
  props: ['ids'],
  mounted () {
    http({
      url: `/heihei/api/activity/coupon_distribute/get_product_detail_coupons?c=h5&s=20000&t=1605161617184&v=1.0&product_id=${this.ids}`
    }).then(res => {
      this.yhlist = res.data.data.coupons
      // const yhlists  = {
      //     available: this.yhlist[0].state,
      //     reason: '',
      //     value: this.yhlist[0].value,
      //     name: this.yhlist[0].name,
      //     startAt: Date.now(this.yhlist[0].validDate.substring(0,10)),
      //     endAt:  Date.now(this.yhlist[0].validDate.substring(11)),
      //     valueDesc: '1.5',
      // }
      //  this.coupon.push(yhlists)
      // console.log(this.coupon);
    })
  },
  methods: {
    onChange () {
      this.showList = false
    },
    yhsbar () {
      this.$emit('clickyh')
    }
  }
}
</script>
<style lang="scss" scoped>
    #yh{
        height: 50px;
        padding: 0 15px;
        position: relative;
        display: flex;
        // .van-popup{
        //     height: 50%;
        // }
        // .van-cell{
        //     padding:10px 0px ;
        // }
        .youhui{
            line-height: 50px;
            color: #8c8c8c;
            font-size: 14px;
        }
        .lingjuan{
            line-height: 50px;
            color: #8c8c8c;
            font-size: 14px;
            position: absolute;
            right: 38px;
            .van-icon{
               position: absolute;
               top:14px
            }
        }
        .yhj{
            position: absolute;
            height: 20px;
            left: 60px;
            top:16px;
            line-height: 20px;
            font-size: 13px;
            color: #ea413c;
            background: #ffd9d6;
            border-radius:2px;
            padding: 0 4px;
        }
    }
</style>
